<script setup lang="ts">
import { ref } from 'vue'
import arrow2_png from '../../../assets/arrow2.png'
import arrow2_v_png from '../../../assets/arrow2_v.png'
import menu_png from '../../../assets/menu.png'

defineProps<{
    title: string;
    data: any[];
    onMenu: Function;

}>()


//菜单点击
let tfShrink = ref<boolean>(true);
const tapShrink = () => {
    tfShrink.value = tfShrink.value == true ? false : true;
}

let listTap = ref<Array<number>>([-1, -1, -1, -1]);
const tapMenu = (i: number, j: number) => {
    if (i == 0) {
        listTap.value = [-1, -1, -1, -1]
        listTap.value[i] = j
    } else {
        listTap.value[i] = j
    }
}
</script>

<template>
    <div v-if="!tfShrink">
        <div class="menu_body">
            <input id="tfCheckbox" class="menu_checkbox Shrink" type="checkbox" :checked="tfShrink" @click="tapShrink()" />
            <!-- 一级 -->
            <div v-for="(v, i) in data " :key="i" class="Shrinkbox">
                <input id="tfCheckbox" class="menu_checkbox" type="checkbox" :checked="listTap[0] == i ? true : false" />
                <div id="menu_li1" @click="tapMenu(0, i); onMenu(v, 0, i)"
                    :class="listTap[0] == i ? 'background' : 'menu_li'">
                    <div class="flex">
                        <img class="menu_img" :src="v.icon ?? menu_png">
                    </div>
                </div>
                <!-- 二级 -->
                <div class="floatbox">
                    <span :style="listTap[0] == i ? 'color:#000;padding-left:20px;' : 'padding-left: 20px;'">
                        {{ v.name }}
                    </span>
                    <div id="menu_li2" class="_checkbox" style="margin-left:15px;" v-for="(   vv, ii   ) in v.children  "
                        :key="ii">
                        <input id="tfCheckbox2" class="menu_checkbox" type="checkbox"
                            :checked="listTap[1] == ii ? true : false" />
                        <div class="menu_li" @click="tapMenu(1, ii); onMenu(vv, 1, ii)">
                            <div class="menu_li_box align" :style="listTap[1] == ii ? 'border-color:#f11;' : ''">
                                <img class="menu_img" :src="vv.icon" v-if="vv.icon">
                                <span class="menu_span" :style="listTap[1] == ii ? 'color:#000;' : ''">{{ vv.name }}</span>
                                <img v-if="vv.children" class="menu_arrow"
                                    :src="listTap[1] == ii ? arrow2_v_png : arrow2_png">
                            </div>
                        </div>
                        <!-- 三级 -->
                        <div id="menu_li3" class="_checkbox" style="margin-left:15px;"
                            v-for="(   vvv, iii   ) in    vv.children  " :key="iii">
                            <div class="menu_li" @click="tapMenu(2, iii); onMenu(vvv, 2, iii)">
                                <div class="menu_li_box align" :style="listTap[2] == iii ? 'border-color:#f11;' : ''">
                                    <img class="menu_img" :src="vv.icon" v-if="vv.icon">
                                    <span class="menu_span" :style="listTap[2] == iii ? 'color:#000;' : ''">{{ vvv.name
                                    }}</span>
                                    <!-- <img class="menu_arrow" :v-if="vvv.children" src="../../../assets/arrow2.png"> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 展开模式 -->
    <div v-if="tfShrink">
        <span class="Title" @click="tapShrink()">{{ title }}</span>
        <div class="menu_body">
            <!-- 一级 -->
            <div v-for="(v, i) in data " :key="i">
                <input id="tfCheckbox" class="menu_checkbox" type="checkbox" :checked="listTap[0] == i ? true : false" />
                <div class="menu_li" id="menu_li1" @click="tapMenu(0, i); onMenu(v, 0, i)">
                    <div class="menu_li_box align" :style="listTap[0] == i ? 'border-color:#f11;' : ''">
                        <img class="menu_img" :src="v.icon ?? menu_png">
                        <span class="menu_span" :style="listTap[0] == i ? 'color:#000;' : ''">{{ v.name }}</span>
                        <img v-if="v.children" class="menu_arrow" :src="listTap[0] == i ? arrow2_v_png : arrow2_png">
                    </div>
                </div>
                <!-- 二级 -->
                <div id="menu_li2" class="_checkbox" style="margin-left:15px;" v-for="(   vv, ii   ) in v.children  "
                    :key="ii">
                    <input id="tfCheckbox2" class="menu_checkbox" type="checkbox"
                        :checked="listTap[1] == ii ? true : false" />
                    <div class="menu_li" @click="tapMenu(1, ii); onMenu(vv, 1, ii)">
                        <div class="menu_li_box align" :style="listTap[1] == ii ? 'border-color:#f11;' : ''">
                            <img class="menu_img" :src="vv.icon" v-if="vv.icon">
                            <span class="menu_span" :style="listTap[1] == ii ? 'color:#000;' : ''">{{ vv.name }}</span>
                            <img v-if="vv.children" class="menu_arrow" :src="listTap[1] == ii ? arrow2_v_png : arrow2_png">
                        </div>
                    </div>
                    <!-- 三级 -->
                    <div id="menu_li3" class="_checkbox" style="margin-left:15px;"
                        v-for="(   vvv, iii   ) in    vv.children  " :key="iii">
                        <div class="menu_li" @click="tapMenu(2, iii); onMenu(vvv, 2, iii)">
                            <div class="menu_li_box align" :style="listTap[2] == iii ? 'border-color:#f11;' : ''">
                                <img class="menu_img" :src="vv.icon" v-if="vv.icon">
                                <span class="menu_span" :style="listTap[2] == iii ? 'color:#000;' : ''">{{ vvv.name
                                }}</span>
                                <!-- <img class="menu_arrow" :v-if="vvv.children" src="../../../assets/arrow2.png"> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.menu_body {
    width: 100%;
    height: calc(100vh - 50px);
    float: left;
    padding: 5px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;


    //菜单行
    .menu_li {
        width: 100%;
        float: left;
        color: #666;
        white-space: nowrap;
        box-sizing: border-box;
        border-radius: 4px;
        user-select: none;
        overflow: hidden;
        margin: 0.3px 0px;
        padding: 10px 5px 10px 0px;
        background-image: linear-gradient(0deg, #fff, #fff, #eee, #fff, #fff);

        // 菜单块
        .menu_li_box {
            box-sizing: border-box;
            border-style: solid;
            border-width: 0px 0px 0px 2px;
            border-color: #089ffd;
            padding: 0px 10px;
            margin-left: 5px;
        }

        //菜单图标
        .menu_img {
            min-width: 20px;
            max-width: 20px;
            min-height: 20px;
            max-height: 20px;
            float: left;
            border-radius: 5px;
            margin: 0px 5px;
        }

        // 菜单字
        .menu_span {
            width: 100%;
            float: left;
            white-space: nowrap;
            padding-right: 10px;
            box-sizing: border-box;
        }

        // 右箭头
        .menu_arrow {
            width: 20px;
            height: 20px;
            float: right;
        }
    }

    // 菜单组
    ._checkbox {
        transition: all 1s;
    }

    .menu_li:active {
        color: #fff;
        background-image: linear-gradient(0deg, #6cb0ed, #4798e0, #0874d3, #6cb0ed, #4798e0);
    }

    .menu_li:hover {
        color: #fff;
        text-shadow: 1px 2px 3px #ccc;
        background-image: linear-gradient(0deg, #6cb0ed, #4798e0, #0874d3, #6cb0ed, #4798e0, );
    }


    /* 菜单开关 */
    #tfCheckbox:not(:checked)~#menu_li2 {
        width: 0;
        height: 0;
        opacity: 0;
        display: block;
        overflow: hidden;
        transition: height opacity 1s;
    }

    /* 菜单开关 */
    #tfCheckbox2:not(:checked)~#menu_li3 {
        width: 0;
        height: 0;
        opacity: 0;
        display: block;
        overflow: hidden;
        transition: height opacity 1s;
    }

    /* 菜单开关 */
    #tfCheckbox3:not(:checked)~#menu_li4 {
        width: 0;
        height: 0;
        opacity: 0;
        display: block;
        overflow: hidden;
        transition: height opacity 1s;
    }
}

/* 隐藏选择框 */
.menu_checkbox {
    /* 隐藏原始复选框 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    /* 设置背景图像 */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #fff;
    background: none;
}

/* 缩进按钮 */
.Shrink {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    background-image: url('../../../assets/indentation.png');
}


/* 浮动菜单 */
.floatbox {
    width: 220px;
    float: left;
    overflow: hidden;
    padding: 5px;
    border-radius: 10px;
    box-sizing: border-box;
}

.Shrinkbox {
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.Shrinkbox:hover .floatbox {
    position: fixed;
    left: 45px;
    margin-top: -25px;
}


//缩进被点击
.background {
    width: 100%;
    float: left;
    padding: 10px 0px;
    border-radius: 60px;
    background-image: linear-gradient(0deg, #6cb0ed, #4798e0, #0874d3, #6cb0ed, #4798e0);

    .menu_img {
        min-width: 20px;
        max-width: 20px;
        min-height: 20px;
        max-height: 20px;
        float: left;
        padding: 0px 5px;
        border-radius: 5px;
    }

}

/* 标题 */
.Title {
    width: 100%;
    padding: 10px 15px 5px 15px;
    float: left;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold;
    user-select: none;
    text-shadow: 1px 2px 3px #666;
}

::-webkit-scrollbar {
    /* 滚动条宽度 */
    width: 0px;
}
</style>
